<script setup lang="ts">
import { ref, computed } from 'vue'
// 不能直接引用官方的vuex，而需要引用自己自定义的`useStore` 组合式函数
// import { useStore } from 'vuex';
import { useStore } from '../store'
const store = useStore()
const count = ref(0)
const showcount = computed(() => {
  // 直接使用这种vue2中的反回方式也是可以的
  // 但是使用getters符合了后端编程中的get和set的编写习惯，存取的逻辑保持一致
  // return store.state.count
  // return store.getters['getCount']
  return store.getters['menu/getCount']
})
const addBtn = () => {
  // 使用ref定义的响应式数据的使用规范
  // js中操作，需要使用xxx.value
  // 模板中使用不需要.value
  // 第一种：使用count来接收vuex中的数据，然后把它重新赋值，传递给vuex
  // count.value = showcount.value + 1
  // store.commit('setCount', count.value)
  // 第二种：这个会受制于初始化的count的值，不一定准确
  // store.commit('setCount', ++count.value)
  // 第三种：直接使用从vuex中获取的数据，赋值后直接使用
  // store.commit('setCount', showcount.value + 1)
  store.commit('menu/setCount', ++count.value)
}
</script>

<template>
  <p>{{ showcount }}</p>
  <button @click="addBtn">增加</button>
  <el-button type="primary" size="default" icon="el-icon-plus">新增</el-button>
  <el-button>Default</el-button>
  <el-button type="primary">Primary</el-button>
  <el-button type="success">Success</el-button>
  <el-button type="info">Info</el-button>
  <el-button type="warning">Warning</el-button>
  <el-button type="danger">Danger</el-button>
  <el-button>中文</el-button>
</template>

<style scoped></style>
